<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_受控组件</title>
</head>
<body>
 
    <div id="test" />
    <script type="text/javascript"
        src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js"></script>
    <script type="text/javascript"
        src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <script type="text/javascript"
        src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        // 现用现取,
        class Logon extends React.Component{
            // 数据维护到状态中,,
            state = {
                uname: '',  // 用户名
                pwd: ''    // 密码
            }
            handleSubmit = (event)=>{
                event.preventDefault() // 阻止表单提交
                // const {username , password} = this
                // alert(`你输入的用户名是 ${username.value}, 你输入的密码是: ${password.value}`)
                const {uname, pwd} = this.state
                console.info(`你输入的用户名是: ${uname}, 你输入的密码是: ${pwd}`)
            }
            onChangeUserName = (event)=> {
                this.setState({uname: event.target.value})
                console.info(event.target.value)
            }
            changePassword = (event)=>{
                this.setState({pwd: event.target.value})
                console.info('真正的值:', event.target.value)
            }
            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名: <input onChange={this.onChangeUserName} type="text" name="username"/>
                        密码: <input onChange={this.changePassword} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Logon/>, document.getElementById("test"))
    </script>
</body>
</html>